<template>
    <div class="app-container">
        <div class="demo-image">
            <el-row>
                <el-col :span="4" v-for="item in list" :key="item.thumb">
                    <div class="block" @mouseenter="enter(item)" @mouseleave="leave(item)" style="height:176px">
                        <el-image
                            style="max-width: 100%;max-height:98% "
                            :src="item.thumb"
                            fit="contain"
                            :preview-src-list="[item.picture]"
                            ></el-image>
                            <div class="demonstration">
                                <span>{{item.add_time | format}}</span>
                                <el-link type="danger" size="mini" icon="el-icon-delete"
                                    @click="remove(item)"
                                    v-show="item.showdel"
                                ></el-link>
                            </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div style="text-align: center;margin-top: 30px;">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :current-page.sync="listQuery.page"
                :page-size="listQuery.pagesize"
                @current-change="current_change">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import { list,del } from '@/api/alerts'
    import moment from 'moment'
    export default {
        data() {
            return {
                interval:undefined,
                listQuery: {
                    page: 1,
                    pagesize: 24,
                    deviceid: undefined,
                    channelid: undefined
                },
                list: null,
                total: 0,   // 记录数量
                listLoading: true,
            }
        },
        created() {
            this.listQuery.page =1
            this.listQuery.deviceid = this.$route.query.deviceid
            this.listQuery.channelid = this.$route.query.channelid
            this.fetchData()
            let me = this
            this.interval = setInterval(function(){
                me.fetchData()
            },60*1000);
        },
        beforeDestroy(){
            clearInterval(this.interval)
        },
        filters:{
            format(date) {
                if (date == undefined) {
                    return "";
                }
                return moment(date).format("YYYY-MM-DD HH:mm:ss");
            }
        },
        methods:{
            fetchData() {
                this.listLoading = true
                list(this.listQuery).then(response => {
                    this.list = response.data.items
           
                    this.srcList=[]
                    this.list.forEach((v)=>{
                        this.srcList.push(v.picture)
                    })
                    this.listLoading = false
                    this.total = response.data.total
                })
            },
            current_change: function(page) {
                this.listQuery.page = page
                this.fetchData()
            },
            enter(item){
                // item.showdel=true
                this.$set(item,'showdel',true)
                console.log('item.showdel=true',item.id, item.showdel);
            },
            leave(item){
                // item.showdel=false
                this.$set(item,'showdel',false)
                console.log('item.showdel=false', item.id,item.showdel);
            },
            remove(item){
                this.$confirm('确认删除此图片？').then(_ => {
                    this.listLoading = true
                    del({id:item.id}).then(ret=>{
                        this.listLoading = false
                        this.$notify({
                            title: 'Success',
                            message: ret.message,
                            type: 'success',
                            duration: 2000
                        })
                        this.fetchData()
                    }).catch(err=>{
                        console.error(err)
                    })
                }).catch(_ => {

                })
            }
        }
    }
</script>
<style scoped>
    div.block{text-align:center;margin-top:5px;margin-bottom:5px}
    .demonstration{font-size:0.8rem}
</style>